<template>
  <div class="p">
    <el-descriptions
      title="我的信息"
      direction="vertical"
      :column="1"
      :size="size"
      border
      :v-bind="worker"
    >
      <template #extra>
        <el-button type="primary" @click="dialogVisible = true"
          >修改信息</el-button
        >
      </template>

      <el-descriptions-item label="用户名">{{
        worker.name
      }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{
        worker.phonenum
      }}</el-descriptions-item>
      <el-descriptions-item label="账号">{{
        worker.username
      }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ worker.sex }}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{
        worker.idcard
      }}</el-descriptions-item>
      <el-descriptions-item label="已完成订单数">{{
        worker.orderCount
      }}</el-descriptions-item>
      <el-descriptions-item label="余额"
        >{{ worker.balance }}
        <el-button
          class="tixian"
          type="success"
          round
          @click="cashoutdialogVisible = true"
          >提现</el-button
        >
      </el-descriptions-item>
    </el-descriptions>

    <el-dialog v-model="dialogVisible" title="编辑信息" width="30%">
      <el-form :model="form" :rules="rules" ref="form" >
        <el-form-item label="账号" :label-width="auto" prop="username">
          <el-input v-model="form.username" placeholder="改一个新的登录账号吧" />
        </el-form-item>
        <el-form-item label="联系电话" :label-width="auto" prop="phonenum">
          <el-input v-model="form.phonenum" placeholder="输入新的手机号">
          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="update()">确定修改</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="cashoutdialogVisible" title="提现" width="30%">
      <el-form :model="cashoutform" :rules="rules" ref="form1">
        <el-form-item label="提现金额"  prop="money" :label-width="auto" >
          <el-input
            v-model="cashoutform.cashoutValue" oninput="value=value.replace(/^\.+|[^\d.]/g,'')" 
            :placeholder="'可提现额度:' + worker.balance"
          />
        </el-form-item>
        <el-form-item label="提现方式" :label-width="auto" prop="ways">
          <el-select v-model="cashoutform.ways" placeholder="选择提现方式">
            <el-option label="微信" value="微信" />
            <el-option label="支付宝" value="支付宝" />
          </el-select>
        </el-form-item>
        <el-form-item label="提现账号" :label-width="auto" prop="account">
          <el-input
            v-model="cashoutform.account"
            placeholder="请输入提现方式账号"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cashoutdialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm()">提现</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
    
    <script setup>
import { computed, ref } from "vue";
import { getApi, postApi, deleteApi, updateApi } from "@/util/api";
import { ElMessage } from "element-plus";
</script>
    
    <script>
import { getApi } from "@/util/api";

export default {
  data() {
    return {
      worker: {
        usernmae: "",
        name: "",
        phonenum: "",
        sex: "",
        idcard: "",
        balance: "",
      },
      dialogVisible: false,
      cashoutdialogVisible: false,
      form: {
        username: "",
        phonenum: "",
      },
      cashoutform: {
        cashoutValue: "",
        ways: "",
        account: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入新的账号", trigger: "blur" },
          {
            min: 5,
            max: 12,
            message: "用户名长度在5-12个字符",
            trigger: "blur",
          },
        ],
        phonenum: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入合法手机号",
            trigger: "blur",
          },
        ],
       
        ways:[
          { required: true, message: "请选择提现方式", trigger: "blur"}
        ],
        account:[
          { required: true, message: "请输入提现账号", trigger: "blur"}
        ],
      },
    };
  },
  created() {
    this.findMe();
  },
  methods: {
    findMe() {
      getApi("workers").then((res) => {
        if (res.data.code == 1) {
          this.worker = res.data.data;
        }
      });
    },

    update() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateApi("workers", this.form).then((res) => {
            if (res.data.code == 1) {
              ElMessage.success("修改成功");
              this.dialogVisible = false;
              this.findMe();
            }else if(res.data.code == -1){
              ElMessage.warning("已经有该用户了，换一个吧！")
              this.form={};
            }
          }).finally(()=>{
            this.form={}
          });
        } else return false;
      });
    },

    confirm() {
      this.$refs['form1'].validate((valid)=>{
        if(valid){
      updateApi("workers/cashout", this.cashoutform)
        .then((res) => {
          if (res.data.code == 1) {
            ElMessage.success("提交成功，48小时内到账！");
            this.cashoutdialogVisible = false;
          } else if (res.data.code == -1) {
            ElMessage.error("余额不足！");
            this.cashoutdialogVisible = false;
          }
        })
        .finally(() => {
          this.findMe();
          this.cashoutform = {};
        });
        }else return false
      })

    },
  },
};
</script>
    
    
    <style scoped>
.el-descriptions {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.tixian {
  position: absolute;
  right: 20px;
  bottom: 5px;
}
.el-descriptions-item {
  display: flex;
}
</style>
    